/* 
	style.css
	
	CSS Dowload Buttons
	
	v1.1
	
	Created by eucalyptuss
	Copyright 2010 Mikolaj Dobrucki. All rights reserved.
*/

.dropbutton { /* main class */
 height: 48px;
 width: 200px;
 font: bold 16px/48px arial;
 margin: 20px;
 position: relative;
 z-index: 0;
}

/*
   ===============================
   ========== RED STYLE ==========
   =============================== 
*/

.red:first-child { /* styling for the left part */
 padding: 7px;
 float: left;
 width: 32px;
 height: 32px;
/* border radius */
 -webkit-border-radius: 4px 0 0 4px;  
 -moz-border-radius: 4px 0 0 4px;  
 border-radius: 4px 0 0 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#ff9782), to(#d83c22));
 background: -moz-linear-gradient(#ff9782, #d83c22);
 background-color: #d83c22;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #c93f27;
}

.dropbutton:hover .red:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#ffbdb0), to(#ee6048));
 background: -moz-linear-gradient(#ffbdb0, #ee6048);
 background-color: #ee6048;
}

.dropbutton:active .red:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#e75138), to(#ff7053));
 background: -moz-linear-gradient(#e75138, #ff7053);
 background-color: #ff9782;
}

.red  {  /* styling for the right part */
 height: 46px;
 width: 151px;
 float: left;
 text-align: center;
/* border radius */
 -webkit-border-radius: 0 4px 4px 0;  
 -moz-border-radius: 0 4px 4px 0;  
 border-radius: 0 4px 4px 0;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#ff9782), to(#d83c22));
 background: -moz-linear-gradient(#ff9782, #d83c22);
 background-color: #d83c22;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #c93f27;
 border-left: 0;
}

.dropbutton:hover .red  {
 background: -webkit-gradient(linear, left top, left bottom, from(#ffbdb0), to(#ee6048));
 background: -moz-linear-gradient(#ffbdb0, #ee6048);
 background-color: #ee6048;
}

.dropbutton:active .red  {
 background: -webkit-gradient(linear, left top, left bottom, from(#e75138), to(#ff7053));
 background: -moz-linear-gradient(#e75138, #ff7053);
 background-color: #ff9782;
}

.red  a { /* link styling */
 color: #fbfbfb;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #c93f27;
}

/*
   ===============================
   ======== ORANGE STYLE =========
   =============================== 
*/

.orange:first-child { /* styling for the left part */
 padding: 7px;
 float: left;
 width: 32px;
 height: 32px;
/* border radius */
 -webkit-border-radius: 4px 0 0 4px;  
 -moz-border-radius: 4px 0 0 4px;  
 border-radius: 4px 0 0 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#fe9f3a), to(#f65b17));
 background: -moz-linear-gradient(#fe9f3a, #f65b17);
 background-color: #f65b17;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #db4706;
}

.dropbutton:hover .orange:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#ffce79), to(#f47638));
 background: -moz-linear-gradient(#ffce79, #f47638);
 background-color: #f47638;
}

.dropbutton:active .orange:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#f47638), to(#fe9f3a));
 background: -moz-linear-gradient(#f47638, #fe9f3a);
 background-color: #fe9f3a;
}

.orange  {  /* styling for the right part */
 height: 46px;
 width: 151px;
 float: left;
 text-align: center;
/* border radius */
 -webkit-border-radius: 0 4px 4px 0;  
 -moz-border-radius: 0 4px 4px 0;  
 border-radius: 0 4px 4px 0;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#fe9f3a), to(#f65b17));
 background: -moz-linear-gradient(#fe9f3a, #f65b17);
 background-color: #f65b17;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #db4706;
 border-left: 0;
}

.dropbutton:hover .orange  {
 background: -webkit-gradient(linear, left top, left bottom, from(#ffce79), to(#f47638));
 background: -moz-linear-gradient(#ffce79, #f47638);
 background-color: #f47638;
}

.dropbutton:active .orange  {
 background: -webkit-gradient(linear, left top, left bottom, from(#f47638), to(#fe9f3a));
 background: -moz-linear-gradient(#f47638, #fe9f3a);
 background-color: #fe9f3a;
}

.orange  a { /* link styling */
 color: #fbfbfb;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #db4706;
}

/*
   ===============================
   ======== YELLOW STYLE =========
   =============================== 
*/

.yellow:first-child { /* styling for the left part */
 padding: 7px;
 float: left;
 width: 32px;
 height: 32px;
/* border radius */
 -webkit-border-radius: 4px 0 0 4px;  
 -moz-border-radius: 4px 0 0 4px;  
 border-radius: 4px 0 0 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#ffe468), to(#ffa41c));
 background: -moz-linear-gradient(#ffe468, #ffa41c);
 background-color: #ffa41c;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #ff9600;
}

.dropbutton:hover .yellow:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#fff584), to(#ffbd20));
 background: -moz-linear-gradient(#fff584, #ffbd20);
 background-color: #ffbd20;
}

.dropbutton:active .yellow:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#ffb71c), to(#ffe468));
 background: -moz-linear-gradient(#ffb71c, #ffe468);
 background-color: #ffe468;
}

.yellow  {  /* styling for the right part */
 height: 46px;
 width: 151px;
 float: left;
 text-align: center;
/* border radius */
 -webkit-border-radius: 0 4px 4px 0;  
 -moz-border-radius: 0 4px 4px 0;  
 border-radius: 0 4px 4px 0;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#ffe468), to(#ffa41c));
 background: -moz-linear-gradient(#ffe468, #ffa41c);
 background-color: #ffa41c;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #ff9600;
 border-left: 0;
}

.dropbutton:hover .yellow  {
 background: -webkit-gradient(linear, left top, left bottom, from(#fff584), to(#ffbd20));
 background: -moz-linear-gradient(#fff584, #ffbd20);
 background-color: #ffbd20;
}

.dropbutton:active .yellow  {
 background: -webkit-gradient(linear, left top, left bottom, from(#ffb71c), to(#ffe468));
 background: -moz-linear-gradient(#ffb71c, #ffe468);
 background-color: #ffe468;
}

.yellow  a { /* link styling */
 color: #333;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #fff;
}

/*
   ===============================
   ========= GREEN STYLE =========
   =============================== 
*/

.green:first-child { /* styling for the left part */
 padding: 7px;
 float: left;
 width: 32px;
 height: 32px;
/* border radius */
 -webkit-border-radius: 4px 0 0 4px;  
 -moz-border-radius: 4px 0 0 4px;  
 border-radius: 4px 0 0 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#c9f33c), to(#8ac70c));
 background: -moz-linear-gradient(#c9f33c, #8ac70c);
 background-color: #8ac70c;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #7ab205;
}

.dropbutton:hover .green:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#dbfa97), to(#9ad819));
 background: -moz-linear-gradient(#dbfa97, #9ad819);
 background-color: #9ad819;
}

.dropbutton:active .green:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#99d41e), to(#bbe52c));
 background: -moz-linear-gradient(#99d41e, #bbe52c);
 background-color: #c9f33c;
}

.green  {  /* styling for the right part */
 height: 46px;
 width: 151px;
 float: left;
 text-align: center;
/* border radius */
 -webkit-border-radius: 0 4px 4px 0;  
 -moz-border-radius: 0 4px 4px 0;  
 border-radius: 0 4px 4px 0;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#c9f33c), to(#8ac70c));
 background: -moz-linear-gradient(#c9f33c, #8ac70c);
 background-color: #8ac70c;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #7ab205;
 border-left: 0;
}

.dropbutton:hover .green  {
 background: -webkit-gradient(linear, left top, left bottom, from(#dbfa97), to(#9ad819));
 background: -moz-linear-gradient(#dbfa97, #9ad819);
 background-color: #9ad819;
}

.dropbutton:active .green  {
 background: -webkit-gradient(linear, left top, left bottom, from(#99d41e), to(#bbe52c));
 background: -moz-linear-gradient(#99d41e, #bbe52c);
 background-color: #c9f33c;
}

.green  a { /* link styling */
 color: #333;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #e2ffa5;
}

/*
   ===============================
   ========= BLUE STYLE =========
   =============================== 
*/

.blue:first-child { /* styling for the left part */
 padding: 7px;
 float: left;
 width: 32px;
 height: 32px;
/* border radius */
 -webkit-border-radius: 4px 0 0 4px;  
 -moz-border-radius: 4px 0 0 4px;  
 border-radius: 4px 0 0 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#87deff), to(#40a9fd));
 background: -moz-linear-gradient(#87deff, #40a9fd);
 background-color: #40a9fd;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #008af5;
}

.dropbutton:hover .blue:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#b1eaff), to(#68bcff));
 background: -moz-linear-gradient(#b1eaff, #68bcff);
 background-color: #68bcff;
}

.dropbutton:active .blue:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#68bcff), to(#87deff));
 background: -moz-linear-gradient(#68bcff, #87deff);
 background-color: #87deff;
}

.blue  {  /* styling for the right part */
 height: 46px;
 width: 151px;
 float: left;
 text-align: center;
/* border radius */
 -webkit-border-radius: 0 4px 4px 0;  
 -moz-border-radius: 0 4px 4px 0;  
 border-radius: 0 4px 4px 0;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#87deff), to(#40a9fd));
 background: -moz-linear-gradient(#87deff, #40a9fd);
 background-color: #40a9fd;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #008af5;
 border-left: 0;
}

.dropbutton:hover .blue  {
 background: -webkit-gradient(linear, left top, left bottom, from(#b1eaff), to(#68bcff));
 background: -moz-linear-gradient(#b1eaff, #68bcff);
 background-color: #68bcff;
}

.dropbutton:active .blue  {
 background: -webkit-gradient(linear, left top, left bottom, from(#68bcff), to(#87deff));
 background: -moz-linear-gradient(#68bcff, #87deff);
 background-color: #87deff;
}

.blue  a { /* link styling */
 color: #fbfbfb;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #008af5;
}

/*
   ===============================
   ======== PURPLE STYLE =========
   =============================== 
*/

.purple:first-child { /* styling for the left part */
 padding: 7px;
 float: left;
 width: 32px;
 height: 32px;
/* border radius */
 -webkit-border-radius: 4px 0 0 4px;  
 -moz-border-radius: 4px 0 0 4px;  
 border-radius: 4px 0 0 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#cba7f5), to(#9b45f4));
 background: -moz-linear-gradient(#cba7f5, #9b45f4);
 background-color: #9b45f4;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #6a14c3;
}

.dropbutton:hover .purple:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#dcbefe), to(#a75ff2));
 background: -moz-linear-gradient(#dcbefe, #a75ff2);
 background-color: #a75ff2;
}

.dropbutton:active .purple:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#b97afc), to(#cba7f5));
 background: -moz-linear-gradient(#b97afc, #cba7f5);
 background-color: #cba7f5;
}

.purple  {  /* styling for the right part */
 height: 46px;
 width: 151px;
 float: left;
 text-align: center;
/* border radius */
 -webkit-border-radius: 0 4px 4px 0;  
 -moz-border-radius: 0 4px 4px 0;  
 border-radius: 0 4px 4px 0;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#cba7f5), to(#9b45f4));
 background: -moz-linear-gradient(#cba7f5, #9b45f4);
 background-color: #9b45f4;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #6a14c3;
 border-left: 0;
}

.dropbutton:hover .purple  {
 background: -webkit-gradient(linear, left top, left bottom, from(#dcbefe), to(#a75ff2));
 background: -moz-linear-gradient(#dcbefe, #a75ff2);
 background-color: #a75ff2;
}

.dropbutton:active .purple  {
 background: -webkit-gradient(linear, left top, left bottom, from(#b97afc), to(#cba7f5));
 background: -moz-linear-gradient(#b97afc, #cba7f5);
 background-color: #cba7f5;
}

.purple  a { /* link styling */
 color: #fbfbfb;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #6a14c3;
}

/*
   ===============================
   ========= BLACK STYLE =========
   =============================== 
*/

.black:first-child { /* styling for the left part */
 padding: 7px;
 float: left;
 width: 32px;
 height: 32px;
/* border radius */
 -webkit-border-radius: 4px 0 0 4px;  
 -moz-border-radius: 4px 0 0 4px;  
 border-radius: 4px 0 0 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#818181), to(#242424));
 background: -moz-linear-gradient(#818181, #242424);
 background-color: #222;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #000;
}

.dropbutton:hover .black:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#a2a2a2), to(#3d3d3d));
 background: -moz-linear-gradient(#a2a2a2, #3d3d3d);
 background-color: #555;
}

.dropbutton:active .black:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#3d3d3d), to(#818181));
 background: -moz-linear-gradient(#3d3d3d, #818181);
 background-color: #777;
}

.black  {  /* styling for the right part */
 height: 46px;
 width: 151px;
 float: left;
 text-align: center;
/* border radius */
 -webkit-border-radius: 0 4px 4px 0;  
 -moz-border-radius: 0 4px 4px 0;  
 border-radius: 0 4px 4px 0;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#818181), to(#242424));
 background: -moz-linear-gradient(#818181, #242424);
 background-color: #222;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #000;
 border-left: 0;
}

.dropbutton:hover .black  {
 background: -webkit-gradient(linear, left top, left bottom, from(#a2a2a2), to(#3d3d3d));
 background: -moz-linear-gradient(#a2a2a2, #3d3d3d);
 background-color: #555;
}

.dropbutton:active .black  {
 background: -webkit-gradient(linear, left top, left bottom, from(#3d3d3d), to(#818181));
 background: -moz-linear-gradient(#3d3d3d, #818181);
 background-color: #777;
}

.black  a { /* link styling */
 color: #fbfbfb;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}


/*
   ===============================
   ========= GREY STYLE ==========
   =============================== 
*/

.grey:first-child { /* styling for the left part */
 padding: 7px;
 float: left;
 width: 32px;
 height: 32px;
/* border radius */
 -webkit-border-radius: 4px 0 0 4px;  
 -moz-border-radius: 4px 0 0 4px;  
 border-radius: 4px 0 0 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#c6c6c6));
 background: -moz-linear-gradient(#fbfbfb, #c6c6c6);
 background-color: #ccc;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #bbb;
}

.dropbutton:hover .grey:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
 background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
 background-color: #ddd;
}

.dropbutton:active .grey:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
 background: -moz-linear-gradient(#d5d5d5, #fafafa);
 background-color: #fbfbfb;
}

.grey  {  /* styling for the right part */
 height: 46px;
 width: 151px;
 float: left;
 text-align: center;
/* border radius */
 -webkit-border-radius: 0 4px 4px 0;  
 -moz-border-radius: 0 4px 4px 0;  
 border-radius: 0 4px 4px 0;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#c6c6c6));
 background: -moz-linear-gradient(#fbfbfb, #c6c6c6);
 background-color: #ccc;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #bbb;
 border-left: 0;
}

.dropbutton:hover .grey  {
 background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
 background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
 background-color: #ddd;
}

.dropbutton:active .grey  {
 background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
 background: -moz-linear-gradient(#d5d5d5, #fafafa);
 background-color: #fbfbfb;
}

.grey  a { /* link styling */
 color: #333;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #fff;
}

/*
   ====================================
   ====== LIGHT STYLE (DROPDOWN) ======
   ====================================
*/

.light {
 width: 120px;
 height: 31px;
 padding: 7px 6px;
 margin-left: 58px;
 position: absolute;
 clear: both;
 z-index: -1;
 -webkit-transition: top .6s linear;
/* text */
 color: #333;
 font: bold 12px/15px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #fff;
/* border radius */
 -webkit-border-radius: 0 0 4px 4px;  
 -moz-border-radius:0 0 4px 4px;  
 border-radius: 0 0 4px 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#bababa), color-stop(.1, #e4e4e4), to(#f2f2f2));
 background: -moz-linear-gradient(#bababa, #e4e4e4 10%, #f2f2f2);
 background-color: #ccc;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px -1px rgba(255, 255, 255, 1) inset;  
 -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 1) inset;  
 box-shadow: 0 1px -1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #bbb;
 border-top: 0;
}

.dropbutton:hover .light {
 top: 48px;
}

.light img {
float: left;
}

.light span {
color: #555;
font-weight: normal;
}

/*
   ====================================
   ====== DARK STYLE (DROPDOWN) =======
   ====================================
*/

.dark {
 width: 120px;
 height: 31px;
 padding: 7px 6px;
 margin-left: 58px;
 position: absolute;
 clear: both;
 -webkit-transition: top .6s linear;
 z-index: -1;
/* text */
 color: #fbfbfb;
 font: bold 12px/15px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
/* border radius */
 -webkit-border-radius: 0 0 4px 4px;  
 -moz-border-radius:0 0 4px 4px;  
 border-radius: 0 0 4px 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#2b2b2b), color-stop(.1, #5c5c5c), to(#838383));
 background: -moz-linear-gradient(#2b2b2b, #5c5c5c 10%, #838383);
 background-color: #ccc;
/* shadows and highlights */
 -webkit-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;  
 -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;  
 box-shadow: 0 1px -1px rgba(255, 255, 255, 0.4) inset;
/* border */
 border: 1px solid #000;
 border-top: 0;
}

.dropbutton:hover .dark {
 top: 48px;
}

.dark img {
float: left;
}

.dark span {
color: #e5e5e5;
font-weight: normal;
}